        body {
            font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
            line-height: 1.5;
            position: relative;
        }
        *, :after, :before {
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-font-smoothing: antialiased;
        }
        *:not(input) {
            -webkit-user-select: none;
        }
        .layui-layer-shade{
            transition-property: opacity;
        }

        .layui-layer-shade.is-entering{
            opacity:0;
            transition-duration:.2s;
            transition-timing-function: ease;
        }
        .layui-layer-shade.is-active.is-entering{
            opacity:1
        }
        .layui-layer-shade.is-leaving{
            opacity:1;
            transition-delay:.2s;
            transition-duration:.2s;
            transition-timing-function:ease-in-out
        }
        .layui-layer-shade.is-active.is-leaving{
            opacity:0
        }

        .layui-layer-page{
            -webkit-perspective: 800px;
            perspective: 800px;
            background-color: transparent;
        }
        .layui-layer, .layui-layer-content{
            border-radius: 6px;
        }
        .layui-layer-page .layui-layer-content{
            overflow: visible;
            height: 380px;
            background-color: #f5f5f7;
            box-shadow: 0 12px 30px 0 rgba(0,0,0,.5), inset 0 1px 0 0 hsla(0,0%,100%,.65);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        #back{
            width: 25px;
            height: 25px;
            background-image: url(/api/img/back@2x.png);
            background-size: 17px;
            background-position: 2px 2px;
            left: 6px;
            top: 6px;
            background-repeat: no-repeat;
            cursor: pointer;
            position: absolute;
            transition-duration: .25s;
            transition-timing-function: ease;
            transition-property: opacity;
        }
        #close{
            width: 25px;
            height: 25px;
            background-image: url(/api/img/close@2x.png);
            background-size: 20px;
            background-position: 2px 2px;
            right: 6px;
            top: 6px;
            background-repeat: no-repeat;
            cursor: pointer;
            position: absolute;
            transition-duration: .25s;
            transition-timing-function: ease;
            transition-property: opacity;
        }
        #logo{
            top: -28px;
            right: 0;
            left: 0;
            margin: 0 auto;
            border: 3px solid #fff;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 2px 2px 0 rgba(0,0,0,.08);
            position: absolute;
            background-color: #e8e9eb;
        }
        #logo img{
            width: 64px;
            height: 64px;
            margin: 3px;
            border-radius: 100%;
            background: #fff;
            display: inline-block;
        }
        #header{
            height: 90px;
            padding: 12px 36px;
            text-align: center;
            background-color: #e8e9eb;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
        #desc{
            margin-top: 53px;
            color: rgb(91, 91, 101);
        }
        #body{
            overflow: hidden;
            height: 260px;
        }
        #footer{
            color: #999;
            font-size: 14px;
            text-align: center;
            position: absolute;
            bottom: -28px;
            width: 100%;
        }
        #footer a{
            color: #999;
            text-decoration: none;
        }
        #views{
            position: relative;
            width: 1000px;
        }
        .view{
            width: 300px;
            float: left;
        }
        #email-validate{
            padding-top: 45px;
        }
        #button-validate{
            padding-top: 40px;
            text-align: center;
        }
        #email-pay{
            padding-top: 40px;
        }
        #button-pay{
            padding-top: 41px;
            text-align: center;
        }
        #button-pay button{
            margin-bottom: 20px;
            background-image: none;
        }
        #button-pay button span{
            display: inline-block;
        }
        #button-pay button.alipay{
            background-color: #00AAEE;
        }
        #button-pay button.alipay:hover {
            background-color: #0086bb;
        }
        #button-pay button.weixin{
            background-color: #00C800;
        }
        #button-pay button.weixin:hover {
            background-color: #009500;
        }
        .alipay span:before {
            content: '';
            float: left;
            display: block;
            width: 23px;
            height: 23px;
            background-image: url(/api/img/alipay.svg);
            margin-right: 10px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .weixin span:before {
            content: '';
            float: left;
            display: block;
            width: 23px;
            height: 23px;
            background-image: url(/api/img/wechat.svg);
            margin-right: 10px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .line-wrapper{
            width: 100%;
            position: relative;
            background-color: #e8e9eb;
        }
        .line-edge {
            border-top: 1px solid #fff;
            box-shadow: 0 -1px 0 0 #d2d2d3;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            width: 100%;
            height: 4px;
            background-color: #f5f5f7;
            margin-bottom: -3px;
            box-sizing: border-box;
        }
        .input-wrapper{
            position: relative;
            margin-left: 37px;
        }

        .email-icon{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            pointer-events: none;
            width: 30px;
        }
        .icon{
            display: block;
            width: 30px;
            height: 100%;
        }

        .input-text{
            border-radius: 4px;
            border: 1px solid hsla(240,1%,49%,.25);
            padding: 8px;
            padding-left: 29px;
            background: none;
            font-size: 15px;
            color: #000;
            margin: 0;
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            text-rendering: auto;
            letter-spacing: normal;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            display: inline-block;
            text-align: start;
            width: 187px;

            transition: border-color 400ms;
            -moz-transition: border-color 400ms;
            -webkit-transition: border-color 400ms;
            -o-transition: border-color 400ms;
        }

        .input-text.warning{
            border-color: red;
        }

        .button{
            width: 226px;
            position: relative;
            border-radius: 4px;
            background-color: #3ea8e5;
            background-image: linear-gradient(-180deg,#44b1e8,#3098de);
            box-shadow: 0 1px 0 0 rgba(46,86,153,.15), inset 0 1px 0 0 rgba(46,86,153,.1), inset 0 -1px 0 0 rgba(46,86,153,.4);
            font-size: 18px;
            line-height: 1.33;
            height: 37px;
            font-weight: 700;
            text-shadow: 0 -1px 0 rgba(0,0,0,.12);
            color: #fff;
            cursor: pointer;
            transition: all .2s ease-in-out;
            display: inline-block;
            -webkit-appearance: button;
            text-transform: none;
            padding: 0;
            border: 0;
        }
        .button:active{
            outline: 0;
            background-image: linear-gradient(180deg,#328ac3,#277bbe);
        }
        .button:focus, input:focus{
            outline: 0;
        }

        .button.disabled{
            cursor: not-allowed;
            pointer-events: none;
            opacity: .65;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        #qrcode-wrapper{
            margin-top: 33px;
            text-align: center;
        }
        #qrcode-tips{
            margin-top: 13px;
            text-align: center;
            color: #5b5b65;
            font-size: 16px;
        }
        #qrcode-tips.alipay{
            color: #0086bb;
        }
        #qrcode-tips.weixin{
            color: #009500;
        }


        @-moz-keyframes panelShakeAnimation {
            0 {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }

            12.5% {
                -webkit-transform: translateX(-6px) rotateY(-5deg);
                -moz-transform: translateX(-6px) rotateY(-5deg);
                -ms-transform: translateX(-6px) rotateY(-5deg);
                -o-transform: translateX(-6px) rotateY(-5deg);
                transform: translateX(-6px) rotateY(-5deg)
            }

            37.5% {
                -webkit-transform: translateX(5px) rotateY(4deg);
                -moz-transform: translateX(5px) rotateY(4deg);
                -ms-transform: translateX(5px) rotateY(4deg);
                -o-transform: translateX(5px) rotateY(4deg);
                transform: translateX(5px) rotateY(4deg)
            }

            62.5% {
                -webkit-transform: translateX(-3px) rotateY(-2deg);
                -moz-transform: translateX(-3px) rotateY(-2deg);
                -ms-transform: translateX(-3px) rotateY(-2deg);
                -o-transform: translateX(-3px) rotateY(-2deg);
                transform: translateX(-3px) rotateY(-2deg)
            }

            87.5% {
                -webkit-transform: translateX(2px) rotateY(1deg);
                -moz-transform: translateX(2px) rotateY(1deg);
                -ms-transform: translateX(2px) rotateY(1deg);
                -o-transform: translateX(2px) rotateY(1deg);
                transform: translateX(2px) rotateY(1deg)
            }

            100% {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }
        }

        @-webkit-keyframes panelShakeAnimation {
            0 {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }

            12.5% {
                -webkit-transform: translateX(-6px) rotateY(-5deg);
                -moz-transform: translateX(-6px) rotateY(-5deg);
                -ms-transform: translateX(-6px) rotateY(-5deg);
                -o-transform: translateX(-6px) rotateY(-5deg);
                transform: translateX(-6px) rotateY(-5deg)
            }

            37.5% {
                -webkit-transform: translateX(5px) rotateY(4deg);
                -moz-transform: translateX(5px) rotateY(4deg);
                -ms-transform: translateX(5px) rotateY(4deg);
                -o-transform: translateX(5px) rotateY(4deg);
                transform: translateX(5px) rotateY(4deg)
            }

            62.5% {
                -webkit-transform: translateX(-3px) rotateY(-2deg);
                -moz-transform: translateX(-3px) rotateY(-2deg);
                -ms-transform: translateX(-3px) rotateY(-2deg);
                -o-transform: translateX(-3px) rotateY(-2deg);
                transform: translateX(-3px) rotateY(-2deg)
            }

            87.5% {
                -webkit-transform: translateX(2px) rotateY(1deg);
                -moz-transform: translateX(2px) rotateY(1deg);
                -ms-transform: translateX(2px) rotateY(1deg);
                -o-transform: translateX(2px) rotateY(1deg);
                transform: translateX(2px) rotateY(1deg)
            }

            100% {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }
        }

        @-o-keyframes panelShakeAnimation {
            0 {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }

            12.5% {
                -webkit-transform: translateX(-6px) rotateY(-5deg);
                -moz-transform: translateX(-6px) rotateY(-5deg);
                -ms-transform: translateX(-6px) rotateY(-5deg);
                -o-transform: translateX(-6px) rotateY(-5deg);
                transform: translateX(-6px) rotateY(-5deg)
            }

            37.5% {
                -webkit-transform: translateX(5px) rotateY(4deg);
                -moz-transform: translateX(5px) rotateY(4deg);
                -ms-transform: translateX(5px) rotateY(4deg);
                -o-transform: translateX(5px) rotateY(4deg);
                transform: translateX(5px) rotateY(4deg)
            }

            62.5% {
                -webkit-transform: translateX(-3px) rotateY(-2deg);
                -moz-transform: translateX(-3px) rotateY(-2deg);
                -ms-transform: translateX(-3px) rotateY(-2deg);
                -o-transform: translateX(-3px) rotateY(-2deg);
                transform: translateX(-3px) rotateY(-2deg)
            }

            87.5% {
                -webkit-transform: translateX(2px) rotateY(1deg);
                -moz-transform: translateX(2px) rotateY(1deg);
                -ms-transform: translateX(2px) rotateY(1deg);
                -o-transform: translateX(2px) rotateY(1deg);
                transform: translateX(2px) rotateY(1deg)
            }

            100% {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }
        }

        @-ms-keyframes panelShakeAnimation {
            0 {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }

            12.5% {
                -webkit-transform: translateX(-6px) rotateY(-5deg);
                -moz-transform: translateX(-6px) rotateY(-5deg);
                -ms-transform: translateX(-6px) rotateY(-5deg);
                -o-transform: translateX(-6px) rotateY(-5deg);
                transform: translateX(-6px) rotateY(-5deg)
            }

            37.5% {
                -webkit-transform: translateX(5px) rotateY(4deg);
                -moz-transform: translateX(5px) rotateY(4deg);
                -ms-transform: translateX(5px) rotateY(4deg);
                -o-transform: translateX(5px) rotateY(4deg);
                transform: translateX(5px) rotateY(4deg)
            }

            62.5% {
                -webkit-transform: translateX(-3px) rotateY(-2deg);
                -moz-transform: translateX(-3px) rotateY(-2deg);
                -ms-transform: translateX(-3px) rotateY(-2deg);
                -o-transform: translateX(-3px) rotateY(-2deg);
                transform: translateX(-3px) rotateY(-2deg)
            }

            87.5% {
                -webkit-transform: translateX(2px) rotateY(1deg);
                -moz-transform: translateX(2px) rotateY(1deg);
                -ms-transform: translateX(2px) rotateY(1deg);
                -o-transform: translateX(2px) rotateY(1deg);
                transform: translateX(2px) rotateY(1deg)
            }

            100% {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }
        }

        @keyframes panelShakeAnimation {
            0 {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }

            12.5% {
                -webkit-transform: translateX(-6px) rotateY(-5deg);
                -moz-transform: translateX(-6px) rotateY(-5deg);
                -ms-transform: translateX(-6px) rotateY(-5deg);
                -o-transform: translateX(-6px) rotateY(-5deg);
                transform: translateX(-6px) rotateY(-5deg)
            }

            37.5% {
                -webkit-transform: translateX(5px) rotateY(4deg);
                -moz-transform: translateX(5px) rotateY(4deg);
                -ms-transform: translateX(5px) rotateY(4deg);
                -o-transform: translateX(5px) rotateY(4deg);
                transform: translateX(5px) rotateY(4deg)
            }

            62.5% {
                -webkit-transform: translateX(-3px) rotateY(-2deg);
                -moz-transform: translateX(-3px) rotateY(-2deg);
                -ms-transform: translateX(-3px) rotateY(-2deg);
                -o-transform: translateX(-3px) rotateY(-2deg);
                transform: translateX(-3px) rotateY(-2deg)
            }

            87.5% {
                -webkit-transform: translateX(2px) rotateY(1deg);
                -moz-transform: translateX(2px) rotateY(1deg);
                -ms-transform: translateX(2px) rotateY(1deg);
                -o-transform: translateX(2px) rotateY(1deg);
                transform: translateX(2px) rotateY(1deg)
            }

            100% {
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0)
            }
        }

        .headShake {
            -webkit-animation-duration: 400ms;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: panelShakeAnimation;
            -moz-animation-duration: 400ms;
            -moz-animation-timing-function: ease-in-out;
            -moz-animation-name: panelShakeAnimation;
        }

        .layui-layer-page.is-entering{
            opacity:0;
            transform:translateY(50px) scale(.95)
        }
        .layui-layer-page.is-entering.is-active{
            opacity:1;
            transform:translateY(0) scale(1);
            transition-timing-function:cubic-bezier(.15,1.45,.55,1);
            transition-duration:.4s
        }
        /*
        .layui-layer-page.is-leaving .layui-layer-content.is-submitted{
            opacity:0;
            transform:translateY(-300px) translateZ(-70px) rotateX(10deg);
            transition-property:opacity,transform;
            transition-timing-function:cubic-bezier(.5,-.33,1,1);
            transition-duration:.2s
        }*/
        .layui-layer-page.is-leaving{
            opacity:0;
            transform:translateY(50px) scale(.95);
            transition-timing-function:ease-in-out;
            transition-duration:.2s
        }